// 引入样式
//1.常态化样式,设置适用于大部分浏览器
require("../../assets/css/normalize.css");
//2.重置样式
require("../../assets/css/reset.css");
// 3.引入阿里矢量图
require("../../assets/fonts/iconfont.css");
//4.自身样式
require("./my_modify.less");

//引入模块
//1.引入工具utils.js
const dom = require("../../utils/dom");
//2.引入axios
const axios = require("../../utils/axios.js");
document.addEventListener("DOMContentLoaded", function () {
	// 1.给个人资料返回按钮绑定点击事件
	dom.get(".backkey").addEventListener("click", function () {
		history.back();
	});
	// 2.点击显示性别选择框
	dom.get("#gender").addEventListener("click", function () {
		weui.picker(
			[
				{ label: "男", value: 0 },
				{ label: "女", value: 1 },
			],
			{
				onConfirm: function (result) {
					dom.get("#gender").textContent = result[0].label;
					dom.get("#gender").dataset.value = result[0].value;
				},
				title: "请选择性别",
			}
		);
	});
	// 3.点击显示生日选择框
	dom.get("#birthday").addEventListener("click", function () {
		weui.datePicker({
			start: 1900,
			end: new Date().getFullYear(),
			onConfirm: function (result) {
				let data = result.map((v) => v.value).join("-");
				dom.get("#birthday").textContent = data;
			},
			title: "多列选择器",
		});
	});
	// 4.点击更换头像上传头像
	dom.get("#avatarbtn").addEventListener("change", function () {
		// 构造上传文件的数据
		let formData = new FormData();
		formData.append("file", this.files[0]);
		// 发送请求
		axios.post("/api/shared/uploadPortrait", formData).then((res) => {
			if (res.data.errno === 0) {
				// 上传成功
				let imgUrl = res.data.data.url;
				dom.get("#avatarImg").src = axios.defaults.baseURL + imgUrl;
				dom.get("#avatarImg").dataset.value = res.data.data.url;
			} else {
				//上传失败
				alert("哦豁！上传失败");
			}
		});
	});
	// 5.所在省份
	let provinceId = 0;
	dom.get("#province").addEventListener("click", async function () {
		//获取省份数据
		let pro = await axios.get("api/shared/province");

		//将省份数据处理成weui需要的数据
		let proArr = pro.data.data.map((v) => {
			return { label: v.name, value: v.id };
		});

		weui.picker(proArr, {
			onConfirm: function (result) {
				dom.get("#province").textContent = result[0].label;
				dom.get("#province").dataset.value = result[0].value;
				provinceId = result[0].value; //将选择的省份ID赋值出来
			},
			title: "请选择省份",
		});
	});

	// 6.所在城市
	dom.get("#city").addEventListener("click", async function () {
		// 判断是否选择了省份
		if (!provinceId) {
			alert("请先选择省份");
			return;
		}
		// 获取数据
		let cityData = await axios.get("/api/shared/city?provinceId=" + provinceId);
		let cityArr = cityData.data.data.map((v) => {
			return { label: v.name, value: v.id };
		});
		weui.picker(cityArr, {
			onConfirm: function (result) {
				dom.get("#city").textContent = result[0].label;
				dom.get("#city").dataset.value = result[0].value;
			},
			title: "请选择城市",
		});
	});
	// 7.个人简介
	dom.get("#sign").addEventListener("input", function () {
		dom.get("#textNum").textContent = this.value.length;
	});
	// 8.保存信息
	dom.get("#saveBtn").addEventListener("click", function () {
		let nickName = dom.get("#nickname").value;
		let gender = Number(dom.get("#gender").dataset.value);
		let provinceId = Number(dom.get("#province").dataset.value);
		let cityId = Number(dom.get("#city").dataset.value);
		let birthday = dom.get("#birthday").textContent;
		let imgUrl = dom.get("#avatarImg").dataset.value;
		let sign = dom.get("#sign").value;

		// 发送修改个人信息的请求
		axios
			.post("/api/user/changeInfo", {
				nickName,
				gender,
				provinceId,
				cityId,
				birthday,
				imgUrl,
				sign,
			})
			.then((res) => {
				if (res.data.errno === 0) {
					localStorage.setItem("token", res.data.data.token);
					alert("修改成功了");
					history.back();
				} else {
					alert("修改失败");
				}
			});
	});
	// 9.信息回填
	axios.get("/api/user/info").then(async (res) => {
		let data = res.data.data;
		// 1) 头像回填
		dom.get("#avatarImg").src = axios.defaults.baseURL + data.imgUrl;
		dom.get("#avatarImg").dataset.value = axios.defaults.baseURL + data.imgUrl;
		// 2) 昵称回填
		dom.get("#nickname").value = data.nickName;
		// 3) 性别回填
		let genderArr = ["男", "女"];
		dom.get("#gender").textContent = genderArr[data.gender];
		dom.get("#gender").dataset.value = data.gender || 0;
		// 4) 生日回填
		dom.get("#birthday").textContent = data.birthday;
		// 5) 省份回填
		let proData = await axios.get("api/shared/province");
		let [province] = proData.data.data.filter((v) => v.id === data.provinceId);
		dom.get("#province").textContent = province.name;
		dom.get("#province").dataset.value = data.provinceId;
		// 6） 城市回填
		let cityData = await axios.get(
			"/api/shared/city?provinceId=" + data.provinceId
		);
		let [curCity] = cityData.data.data.filter((v) => v.id === data.cityId);
		dom.get("#city").textContent = curCity.name;
		dom.get("#city").dataset.value = data.cityId;
		// 7) 个人简介回填
		dom.get("#sign").value = data.sign;
		dom.get("#textNum").textContent = data.sign.length;
	});
});
